import React from "react";
import './eve.css'
import mitt from '../funcCom/mitt.js'
import propTypes from 'prop-types'
import Sx from './sx.js'
export default class Eve extends React.Component{
    //后代可以使用的属性-------注入
    static childContextTypes={
        msg:propTypes.string,
        change:propTypes.func
    }
    // 生命周期函数
    getChildContext(){
        return {
            msg:this.state.msg,
            change:this.change
        }
    }
    constructor(){
        super()
        this.state={
            age:0,
            name:'张三',
            msg:'开始的msg---------0000'
        }
        
    }
    change=(mm)=>{
        
        this.setState({
            msg:'改变后的msg+++++++++'+mm
        })
        console.log(this,'***************')
    }
    render(){
        let {age,name,msg}=this.state
        return <div className='eve'>
                 <p>姓名：{name}</p>
                 <p>年龄：{age}</p>
                 <button onClick={this.add.bind(this,2)}>岁数大了</button>
                 <button onClick={this.know.bind(this)}>看下事件属性</button>
                 》》》事件绑定
               ----------------------------------------------------------
                 》》》》通过上下文通信
                 <div>
                     <h3>基于上下文通信</h3>
                     <p>-------本身msg-----{msg}---</p>
                     <Sx></Sx>
                 </div>
            </div>
    }
    add(num){
        let {age}=this.state
        //修改state重新渲染
        this.setState({
            age:age+num
        })
    }
    know(en){
        //en  里面有元素的属性
        console.dir(en,)
        console.log('看下有哪些事件属性',this)
    }
    //挂载生命周期
    componentDidMount(){
        //bus监听事件
       mitt.on('to',(data)=>{
           console.log(data,'收到通信')
       })
    }
}